<template>
  <view class="main dispaly-col-center">
    <view class="title-box">
      <view class="title-bg">
        <image src="/static/icon/title-bg.png" mode="aspectFill"/>
        <view class="title-txt">发布</view>
      </view>
    </view>
    <view class="container">
      <view class="form">
        <view class="form-item">
          <view class="name">名称</view>
          <view class="ipt-box">
            <view class="ipt-bg">
              <image src="/static/icon/b-ipt.png" mode="aspectFill"/>
              <input placeholder="请输入名称"/>
            </view>
            <view class="edit">
              <image src="/static/pop/five.png" mode="aspectFill"/>
            </view>
          </view>
        </view>
        <view class="form-block dispaly-just-between">
          <view class="form-item">
            <view class="name">年级</view>
            <view class="ipt-box w-302">
              <view class="ipt-bg w-302">
                <image class="w-302" src="/static/icon/s-ipt.png" mode="aspectFill"/>
                <input placeholder="请选择年级" disabled @click="show = true"/>
              </view>
              <view class="edit">
                <up-icon name="arrow-down-fill" color="#ffbf0f" size="16"></up-icon>
              </view>
            </view>
          </view>
          <view class="form-item">
            <view class="name">专业</view>
            <view class="ipt-box w-302">
              <view class="ipt-bg w-302">
                <image class="w-302" src="/static/icon/s-ipt.png" mode="aspectFill"/>
                <input placeholder="请选择专业" disabled @click="show = true"/>
              </view>
              <view class="edit">
                <up-icon name="arrow-down-fill" color="#ffbf0f" size="16"></up-icon>
              </view>
            </view>
          </view>
        </view>
        <view class="form-block dispaly-just-between">
          <view class="form-item">
            <view class="name">价格</view>
            <view class="ipt-box w-302">
              <view class="ipt-bg w-302">
                <image class="w-302" src="/static/icon/s-ipt.png" mode="aspectFill"/>
                <input placeholder="请输入价格"/>
              </view>
              <view class="edit">
                <image src="/static/pop/five.png" mode="aspectFill"/>
              </view>
            </view>
          </view>
        </view>
        <view class="form-item">
          <view class="name">图片（最多九张）</view>
          <view>
            <ImageUpload :number="9"/>
          </view>
        </view>
        <view class="form-item">
          <view class="name">详情描述</view>
          <view class="desc">
            <textarea class="desc-text" cols="30" rows="10" placeholder="详情描述"></textarea>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class="btn-box">
    <view class="item-box dispaly-just-between">
      <view class="item">
        <view class="b-txt dispaly-align-center" @click="$goUrl('back')">取消</view>
        <image src="/static/icon/xy.png" mode="aspectFill"/>
      </view>
      <view class="item">
        <view class="b-txt dispaly-align-center" style="color: #FFD257 ">发布</view>
        <image src="/static/icon/buy.png" mode="aspectFill"/>
      </view>
    </view>
  </view>

  <up-picker  @cancel="show= false" cancelColor="#ee003e" confirmColor="#2d68ea" :show="show" :columns="columns" keyName="label" closeOnClickOverlay @close="show = false" ></up-picker>

</template>

<script setup>
import {ref} from 'vue'
import ImageUpload from "../../components/imageUpload/imageUpload.vue";
const columns = ref([
  [
    {
      label: '雪月夜',
      id: 2021
    },
    {
      label: '冷夜雨',
      id: 804
    }
  ]
]);
const show = ref(false)
</script>

<style lang="scss" scoped>
.w-302 {
  width: 302rpx !important;
}
.h-60 {
  height: 60rpx !important;
}
.main {
  margin-top: 30rpx;

  .title-box {
    width: 692rpx;
    height: 78rpx;
    position: relative;

    .title-bg {
      width: 692rpx;
      height: 78rpx;

      image {
        width: 692rpx;
        height: 78rpx;
      }
    }

    .title-txt {
      width: 692rpx;
      height: 78rpx;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      text-align: center;
      line-height: 78rpx;
    }
  }

  .container {
    box-sizing: border-box;
    width: 692rpx;
    border-left: 6rpx solid #4e3b0c;
    border-right: 6rpx solid #4e3b0c;
    border-bottom: 6rpx solid #4e3b0c;
    background: #ffd257;
    padding: 23rpx 10rpx 10rpx 10rpx;
    display: flex;
    justify-content: center;

    .form {
      .form-item {
        margin-bottom: 34rpx;
        .desc {
          height: 300rpx;
          width: 626rpx;
          border: 6rpx solid #4e3b0c;
          background: #e6bd4e;
          .desc-text {
            height: 100%;
            width: 100%;
            padding: 24rpx;
            color: #fff;
          }
        }
        .name {
          margin-bottom: 19rpx;
        }

        .ipt-box {
          position: relative;
          width: 636rpx;
          height: 60rpx;
          .ipt-bg {
            width: 636rpx;
            height: 60rpx;
            position: relative;
            input {
              position: absolute;
              top: 0;
              left: 0;
              height: 60rpx;
              padding: 0 0 0 20rpx;
              color: #fff;
            }
            image {
              width: 636rpx;
              height: 60rpx;
            }
          }
        }

        .edit {
          position: absolute;
          top: 15rpx;
          right: 15rpx;

          image {
            width: 23rpx;
            height: 23rpx;
          }
        }
      }
    }
  }

  .bottom-line {
    background: #ffd257;

    image {
      width: 692rpx;
      height: 10rpx;
    }
  }
}

.btn-box {
  width: 100%;
  height: 174rpx;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffd257;

  .item-box {
    padding: 18rpx 26rpx 0 26rpx;

    .item {
      position: relative;
      width: 330rpx;
      height: 80rpx;

      image {
        position: absolute;
        z-index: -1;
        left: 0;
        right: 0;
        top: 0;
        width: 330rpx;
        height: 80rpx;
      }

      .b-txt {
        font-family: IPix;
        font-size: 36rpx;
        color: #000000;
        width: 330rpx;
        height: 80rpx;
      }
    }
  }
}
</style>